<template>
	<view class="page">
    <view class="top">
      <u-button shape="circle" text="环保回收旧衣服助力低碳生活" color="linear-gradient(to right, rgb(42, 47, 67), rgb(230, 41, 3))"></u-button>
      <img style="width: 100vw;height: 200px;" src="http://127.0.0.1:3000/image/010.png" alt="">
      <u-steps class="topStep" activeColor="#2a2f43"  :current="step">
		    <u-steps-item title="查看信息" desc="第一步"></u-steps-item>
        <u-steps-item title="员工接单" desc="第二步" ></u-steps-item>
        <u-steps-item title="员工上门" desc="第三步"></u-steps-item>
        <u-steps-item title="回收完成" desc="第四步"></u-steps-item>
	    </u-steps>
      <u-button color="#2a2f43" @click="goNext" class="topButton" type="primary" icon="arrow-rightward" text="查看下一步"></u-button>
    </view>
    <u-line color="#2a2f43"></u-line>
    <view class="main">
      <view class="mainBox" v-for="item in recycleOrderList" :key="item.id"   @click="goDetails(item.id)">
        <view class="mianUser">用户:{{item.ordername}}的预约订单</view><br>
        <view class="mainAddress">地址为：{{ item.address }}</view>
        <!-- <u-button  class="mainButton" 
        shape="circle"  color="#2a2f43"  
        type="primary" icon="arrow-right" >
        </u-button> -->
        <button class="mainButton">接单</button>
      </view>
     
    </view>
	</view>
</template>

<script>
  import { baseUrl } from '@/config'
export default {
	data() {
		return {
      index:0,
        step:0,
        recycleOrderList:[],
		};
	},
	onShow(){

  },
  mounted(){
    this.getRecycleOrder()
  },
	methods: {
       goDetails(id){
      uni.navigateTo({url:`/pages/recycle-detail/index?index=${id}`})
    },
    getRecycleOrder(){
      uni.request({
        url: baseUrl+'/v1/recycle/orderStatus', 
        success: (res) => {
          this.recycleOrderList = res.data.data
        }
                });
    },
    goNext(){
      if(this.step<=4){this.step+=1}
      else{this.step=0}
    }
	}
};
</script>

<style lang="scss" scoped>
.page{
  .top{
    .topStep{
      margin-top: 40rpx;
      }
    .topButton{
      background-color: #e62903;
      width: 200rpx;
      border-radius: 40rpx;
      margin-top: 20rpx;
      }
  }
  .main{
    margin: 20rpx 0;
    .mainBox{
      width: 90vw;
      height: 200rpx;
      border: 2px solid #e62903;
      border-radius: 15px;
      box-shadow: 6upx 6upx  8upx 8upx rgba(239, 4, 4, 0.2);
      margin: 20rpx auto;
      position: relative;
      padding: 10px;
      .mianUser{
        width: 580rpx;
        margin: 10px;
      }
      .mainAddress{
        width: 580rpx;
        padding-left: 10px;
      }
      .mainButton{
        width: 100rpx;
        height: 200rpx;
        position: absolute;
        right: 6rpx;
        top: 22rpx;
        // border: 2px solid #e62903;
        border-radius: 20px;
        background-color: #2a2f43;
        color: #e62903;
      }
    }
  }
  .foot{
  }
  
}
</style>
